<template>
  <div>
    <!--<p><my-input :value="stateValue" @input="handleStateValueChange"></my-input></p>-->
    <p><my-input v-model="stateValue"></my-input> </p>
    <p><my-show :content="stateValue"></my-show> </p>
    <p>{{ stateValue }}</p>
  </div>
</template>

<script>
import MyInput from '_c/MyInput'
import MyShow from '_c/MyShow'
import { mapState, mapMutations } from 'vuex'

export default {
  components: { MyShow, MyInput },
  data () {
    return {
      inputValue: ''
    }
  },
  computed: {
    ...mapState({
      // stateValue: state => state.stateValue
    }),
    stateValue: {
      get () {
        return this.$store.state.stateValue
      },
      set (val) {
        this.SET_STATE_VALUE(val)
      }
    }
  },
  methods: {
    ...mapMutations([
      'SET_STATE_VALUE'
    ]),
    handleStateValueChange (val) {
      this.SET_STATE_VALUE(val)
    }
  }
}
</script>
